<template>
  <div class="main-container">    
    <!-- 头部 -->
    <div class="main-container__header shadow-l">
      <AppHeader></AppHeader>
    </div>
    <div class="main-container__main">
        <div class="main-container__main__menu">
          <AppAside @onClickCollapse="onClickCollapse"></AppAside>
        </div>
        <div class="main-container__main__content" :class="containerClass">
          <AppTabs ref="appTabs"></AppTabs>
          <div class="nav">
              <AppNav></AppNav>
          </div>
          <!-- <AppPageHeader></AppPageHeader> -->
          <div class="page__view">
              <!--  -->
              <router-view @closePage="closePage"></router-view>
          </div>
        </div>
    </div>
  </div>
</template>  

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'


import { AppHeader,AppAside,AppTabs,AppNav,AppPageHeader } from "./impl"


export default defineComponent({
  name: 'MainContainer',
  components: {
    AppHeader,
    AppAside,
    AppTabs,
    AppNav,
    AppPageHeader
  },
  data(){
    return {
      username: "",
      containerClass : "container-fluid"
    }
  },

  methods:{

    forget(){
      console.log("forget")
    },

    onClickCollapse(collapse:any){
      if(collapse){
        this.containerClass = "container-fluid--collapse";
      }
      else {
        this.containerClass = "container-fluid";
      }
    },

    closePage(){
      // TODO
    }
  },

  mounted(){
    // console.log("on mounted MainPage 11")
  },

  setup(){
    // const store = useStore()

    // return {
    //   LoginByUsername:(userObj:any)=> store.dispatch('LoginByUsername')
    // }

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>



</style>
